<template>
  <div>
  <byd-header />
    <!-- 左侧锚点固定框，在版心外 -->
    <div class="titles">
    <Ul type="none" id="tb">
      <li>
        <a href="#table1"><i class="el-icon-s-data active">尺寸参数</i></a>
      </li>
      <li>
        <a href="#table2"><i class="el-icon-s-promotion">动力性能</i></a>
      </li>
      <li>
        <a href="#table3"><i class="el-icon-upload">制动悬架</i></a>
      </li>
      <li>
        <a href="#table4"><i class="el-icon-warning">安全装备</i></a>
      </li>
      <li>
        <a href="#table5"><i class="el-icon-s-tools">驾驶装备</i></a>
      </li>
      <li>
        <a href="#table6"><i class="el-icon-s-open">外观装备</i></a>
      </li>
      <li>
        <a href="#table7"><i class="el-icon-s-goods"> 内饰装备</i></a>
      </li>
      <li>
        <a href="#table8"><i class="el-icon-s-platform">智能系统</i></a>
      </li>
      <li>
        <a href="#table9"><i class="el-icon-s-opportunity">新能源类</i></a>
      </li>
    </Ul>
    </div>
    <!-- 版心开始 ↓ ↓ ↓ ↓ ↓ ↓-->
    <div id="center">
      <!-- 栅格布局，车型对比顶部三个车的图片-->
      <el-row :gutter="20" style="margin: 5px 0px 0px 50px">
        <!--车辆pk图 -->
        <el-col :span="6">
          <img
            src="../assets/compare_pk.png"
            class="imagePk"
            style="display: block; margin: 20px 0"
          />
        </el-col>
        <!-- 车1图片操作部分 -->
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img
              src="../assets/car_compare.jpg"
              @click="dialogFormVisible_1 = true"
              class="image"
              v-if="picShow_1"
            />
            <img
              :src="datapic_1.lpic"
              @click="dialogFormVisible_1 = true"
              class="image carimg"
              v-if="changePic1()"
              title="点击换车🚗vs🚕"
            />
            <el-dialog
              title="添加车型"
              :visible.sync="dialogFormVisible_1"
              style="width: 100%; margin: 0 auto; top: 15vh; center: false"
            >
              <el-cascader
                v-model="value"
                :options="options"
                :show-all-levels="false"
              ></el-cascader>
              <div style="width: 1px; height: 100px"></div>
              <div slot="footer" class="dialog-footer">
                <el-button
                  type="primary"
                  @click="
                    dialogFormVisible_1 = false
                    getData1()
                    getPic1()
                  "
                  >确定</el-button
                >
              </div>
            </el-dialog>

            <div style="padding: 14px">
              <i
                ><h4>{{ datapic_1.title }}</h4></i
              >
            </div>
          </el-card>
        </el-col>
        <!-- 车2图片操作部分 -->
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img
              src="../assets/car_compare.jpg"
              @click="dialogFormVisible_2 = true"
              class="image"
              v-if="picShow_2"
            />
            <img
              :src="datapic_2.lpic"
              @click="dialogFormVisible_2 = true"
              class="image carimg"
              v-if="changePic2()"
              title="点击换车🚗vs🚕"
            />

            <el-dialog
              title="添加车型"
              :visible.sync="dialogFormVisible_2"
              style="width: 100%; margin: 0 auto; top: 15vh; center: false"
            >
              <el-cascader
                v-model="value"
                :options="options"
                :show-all-levels="false"
              ></el-cascader>
              <div style="width: 1px; height: 100px"></div>
              <div slot="footer" class="dialog-footer">
                <el-button
                  type="primary"
                  @click="
                    dialogFormVisible_2 = false
                    getData2()
                    getPic2()
                  "
                  >确定</el-button
                >
              </div>
            </el-dialog>

            <div style="padding: 14px">
              <i
                ><h4>{{ datapic_2.title }}</h4></i
              >
            </div>
          </el-card>
        </el-col>
        <!-- 车3图片操作部分 -->
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img
              src="../assets/car_compare.jpg"
              @click="dialogFormVisible_3 = true"
              class="image"
              v-if="picShow_3"
            />
            <img
              :src="datapic_3.lpic"
              @click="dialogFormVisible_3 = true"
              class="image carimg"
              v-if="changePic3()"
              title="点击换车🚗vs🚕"
            />
            <el-dialog
              title="添加车型"
              :visible.sync="dialogFormVisible_3"
              style="width: 100%; margin: 0 auto; top: 15vh; center: false"
            >
              <el-cascader
                v-model="value"
                :options="options"
                :show-all-levels="false"
              ></el-cascader>
              <div style="width: 1px; height: 100px"></div>
              <div slot="footer" class="dialog-footer">
                <el-button
                  type="primary"
                  @click="
                    dialogFormVisible_3 = false
                    getData3()
                    getPic3()
                  "
                  >确定</el-button
                >
              </div>
            </el-dialog>

            <div style="padding: 14px">
              <i
                ><h4>{{ datapic_3.title }}</h4></i
              >
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 参数表格 -->
      <el-row
        :gutter="20"
        style="
          height: calc(100vh - 350px);
          overflow: auto;
          box-shadow: 0 0 6px 1px rgb(223, 222, 222);
          border-radius: 5px;
          margin-left: 50px;
        "
        class="scroll"
      >
        <!-- 参数名 列 -->
        <el-col :span="6">
          <div class="bg-purple">
            <table style="border-collapse: collapse" border="1">
              <tr id="table1">
                尺寸参数
              </tr>
              <tr>
                长×宽×高(mm)
              </tr>
              <tr>
                轴距(mm)
              </tr>
              <tr>
                轮距前/后(mm)
              </tr>
              <tr>
                最小转弯半径(m)
              </tr>
              <tr>
                轮胎规格
              </tr>
              <tr id="table2">
                动力性能
              </tr>
              <tr>
                驱动型式
              </tr>
              <tr>
                0_100km/h加速时间(s)
              </tr>
              <tr id="table3">
                制动悬架
              </tr>
              <tr>
                前制动器类型
              </tr>
              <tr>
                后制动器类型
              </tr>
              <tr>
                前悬架类型
              </tr>
              <tr>
                后悬架类型
              </tr>
              <tr id="table4">
                安全装备
              </tr>
              <tr>
                智能动力制动系统
              </tr>
              <tr>
                舒适停车控制系统
              </tr>
              <tr>
                车身电子稳定系统
              </tr>
              <tr>
                自动驻车系统
              </tr>
              <tr>
                坡道起步控制系统
              </tr>
              <tr>
                电子制动力分配系统
              </tr>
              <tr>
                液压制动辅助系统
              </tr>
              <tr>
                牵引力控制系统
              </tr>
              <tr>
                车辆动态控制系统
              </tr>
              <tr>
                驻车制动减速度控制系统
              </tr>
              <tr>
                前排双安全气囊
              </tr>
              <tr>
                车速感应自动上锁
              </tr>
              <tr id="table5">
                驾驶装备
              </tr>
              <tr>
                AEB-CCR自动紧急制动系统
              </tr>
              <tr>
                LDWS车道偏离预警系统
              </tr>
              <tr>
                LCA并线辅助系统
              </tr>
              <tr>
                TJA交通拥堵辅助系统
              </tr>
              <tr>
                W-HUD抬头显示
              </tr>
              <tr>
                3D全息透明影像系统
              </tr>
              <tr id="table6">
                外观装备
              </tr>
              <tr>
                蓝牙钥匙
              </tr>
              <tr>
                前舱盖气弹簧开启
              </tr>
              <tr id="table7">
                内饰设备
              </tr>
              <tr>
                主驾座椅8向电动调节
              </tr>
              <tr>
                金属迎宾踏板
              </tr>
              <tr id="table8">
                智能系统
              </tr>
              <tr>
                5G速联
              </tr>
              <tr>
                I-Call智慧客服
              </tr>
              <tr>
                E-Call紧急救援
              </tr>
              <tr id="table9">
                新能源类
              </tr>
              <tr>
                自动开启前大灯
              </tr>
              <tr>
                前大灯提前开启/延时关闭
              </tr>
              <tr>
                LED高位制动灯
              </tr>
              <tr>
                LED四门门灯
              </tr>
              <tr>
                外后视镜倒车自动调节
              </tr>
              <tr>
                PM2.5绿净系统
              </tr>
              <tr>
                远程高温消毒杀菌模式
              </tr>
              <tr>
                负离子空气净化器
              </tr>
              <tr>
                预约充电系统
              </tr>
            </table>
          </div>
        </el-col>

        <!-- 第1个车的参数-->
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <table style="border-collapse: collapse" border="1">
              <tr id="table1">
                尺寸参数
              </tr>
              <tr>
                {{
                  data_1.size_a
                }}
              </tr>
              <tr>
                {{
                  data_1.size_b
                }}
              </tr>
              <tr>
                {{
                  data_1.size_c
                }}
              </tr>
              <tr>
                {{
                  data_1.size_d
                }}
              </tr>
              <tr>
                {{
                  data_1.size_e
                }}
              </tr>
              <tr id="table2">
                动力性能
              </tr>
              <tr>
                {{
                  data_1.power_i
                }}
              </tr>
              <tr>
                {{
                  data_1.power_n
                }}
              </tr>
              <tr id="table3">
                制动悬架
              </tr>
              <tr>
                {{
                  data_1.brake_a
                }}
              </tr>
              <tr>
                {{
                  data_1.brake_b
                }}
              </tr>
              <tr>
                {{
                  data_1.brake_e
                }}
              </tr>
              <tr>
                {{
                  data_1.brake_f
                }}
              </tr>
              <tr id="table4">
                安全装备
              </tr>
              <tr>
                {{
                  data_1.safty_a
                }}
              </tr>
              <tr>
                {{
                  data_1.safty_b
                }}
              </tr>
              <tr>
                {{
                  data_1.safty_c
                }}
              </tr>
              <tr>
                {{
                  data_1.safty_d
                }}
              </tr>
              <tr>
                {{
                  data_1.safty_e
                }}
              </tr>
              <tr>
                {{
                  data_1.safty_f
                }}
              </tr>
              <tr>
                {{
                  data_1.safty_g
                }}
              </tr>
              <tr>
                {{
                  data_1.safty_h
                }}
              </tr>
              <tr>
                {{
                  data_1.safty_i
                }}
              </tr>
              <tr>
                {{
                  data_1.safty_k
                }}
              </tr>
              <tr>
                {{
                  data_1.safty_o
                }}
              </tr>
              <tr>
                {{
                  data_1.safty_y
                }}
              </tr>
              <tr id="table5">
                驾驶装备
              </tr>
              <tr>
                {{
                  data_1.assist_b
                }}
              </tr>
              <tr>
                {{
                  data_1.assist_f
                }}
              </tr>
              <tr>
                {{
                  data_1.assist_g
                }}
              </tr>
              <tr>
                {{
                  data_1.assist_h
                }}
              </tr>
              <tr>
                {{
                  data_1.assist_m
                }}
              </tr>
              <tr>
                {{
                  data_1.assist_q
                }}
              </tr>
              <tr id="table6">
                外观装备
              </tr>
              <tr>
                {{
                  data_1.facade_f
                }}
              </tr>
              <tr>
                {{
                  data_1.facade_h
                }}
              </tr>
              <tr id="table7">
                内饰装备
              </tr>
              <tr>
                {{
                  data_1.trim_e
                }}
              </tr>
              <tr>
                {{
                  data_1.trim_w
                }}
              </tr>
              <tr id="table8">
                智能系统
              </tr>
              <tr>
                {{
                  data_1.dilink_c
                }}
              </tr>
              <tr>
                {{
                  data_1.dilink_i
                }}
              </tr>
              <tr>
                {{
                  data_1.dilink_j
                }}
              </tr>
              <tr id="table9">
                新能源类
              </tr>
              <tr>
                {{
                  data_1.lamplight_e
                }}
              </tr>
              <tr>
                {{
                  data_1.lamplight_g
                }}
              </tr>
              <tr>
                {{
                  data_1.lamplight_h
                }}
              </tr>
              <tr>
                {{
                  data_1.lamplight_k
                }}
              </tr>
              <tr>
                {{
                  data_1.glass_f
                }}
              </tr>
              <tr>
                {{
                  data_1.air_d
                }}
              </tr>
              <tr>
                {{
                  data_1.air_e
                }}
              </tr>
              <tr>
                {{
                  data_1.air_h
                }}
              </tr>
              <tr>
                {{
                  data_1.new_energy_h
                }}
              </tr>
            </table>
          </div>
        </el-col>
        <!-- 第2个车的参数-->
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <table style="border-collapse: collapse" border="1">
              <tr id="table1">
                尺寸参数
              </tr>
              <tr>
                {{
                  data_2.size_a
                }}
              </tr>
              <tr>
                {{
                  data_2.size_b
                }}
              </tr>
              <tr>
                {{
                  data_2.size_c
                }}
              </tr>
              <tr>
                {{
                  data_2.size_d
                }}
              </tr>
              <tr>
                {{
                  data_2.size_e
                }}
              </tr>
              <tr id="table2">
                动力性能
              </tr>
              <tr>
                {{
                  data_2.power_i
                }}
              </tr>
              <tr>
                {{
                  data_2.power_n
                }}
              </tr>
              <tr id="table3">
                制动悬架
              </tr>
              <tr>
                {{
                  data_2.brake_a
                }}
              </tr>
              <tr>
                {{
                  data_2.brake_b
                }}
              </tr>
              <tr>
                {{
                  data_2.brake_e
                }}
              </tr>
              <tr>
                {{
                  data_2.brake_f
                }}
              </tr>
              <tr id="table4">
                安全装备
              </tr>
              <tr>
                {{
                  data_2.safty_a
                }}
              </tr>
              <tr>
                {{
                  data_2.safty_b
                }}
              </tr>
              <tr>
                {{
                  data_2.safty_c
                }}
              </tr>
              <tr>
                {{
                  data_2.safty_d
                }}
              </tr>
              <tr>
                {{
                  data_2.safty_e
                }}
              </tr>
              <tr>
                {{
                  data_2.safty_f
                }}
              </tr>
              <tr>
                {{
                  data_2.safty_g
                }}
              </tr>
              <tr>
                {{
                  data_2.safty_h
                }}
              </tr>
              <tr>
                {{
                  data_2.safty_i
                }}
              </tr>
              <tr>
                {{
                  data_2.safty_k
                }}
              </tr>
              <tr>
                {{
                  data_2.safty_o
                }}
              </tr>
              <tr>
                {{
                  data_2.safty_y
                }}
              </tr>
              <tr id="table5">
                驾驶装备
              </tr>
              <tr>
                {{
                  data_2.assist_b
                }}
              </tr>
              <tr>
                {{
                  data_2.assist_f
                }}
              </tr>
              <tr>
                {{
                  data_2.assist_g
                }}
              </tr>
              <tr>
                {{
                  data_2.assist_h
                }}
              </tr>
              <tr>
                {{
                  data_2.assist_m
                }}
              </tr>
              <tr>
                {{
                  data_2.assist_q
                }}
              </tr>
              <tr id="table6">
                外观装备
              </tr>
              <tr>
                {{
                  data_2.facade_f
                }}
              </tr>
              <tr>
                {{
                  data_2.facade_h
                }}
              </tr>
              <tr id="table7">
                内饰装备
              </tr>
              <tr>
                {{
                  data_2.trim_e
                }}
              </tr>
              <tr>
                {{
                  data_2.trim_w
                }}
              </tr>
              <tr id="table8">
                智能系统
              </tr>
              <tr>
                {{
                  data_2.dilink_c
                }}
              </tr>
              <tr>
                {{
                  data_2.dilink_i
                }}
              </tr>
              <tr>
                {{
                  data_2.dilink_j
                }}
              </tr>
              <tr id="table9">
                新能源类
              </tr>
              <tr>
                {{
                  data_2.lamplight_e
                }}
              </tr>
              <tr>
                {{
                  data_2.lamplight_g
                }}
              </tr>
              <tr>
                {{
                  data_2.lamplight_h
                }}
              </tr>
              <tr>
                {{
                  data_2.lamplight_k
                }}
              </tr>
              <tr>
                {{
                  data_2.glass_f
                }}
              </tr>
              <tr>
                {{
                  data_2.air_d
                }}
              </tr>
              <tr>
                {{
                  data_2.air_e
                }}
              </tr>
              <tr>
                {{
                  data_2.air_h
                }}
              </tr>
              <tr>
                {{
                  data_2.new_energy_h
                }}
              </tr>
            </table>
          </div>
        </el-col>
        <!-- 第3个车的参数-->
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <table style="border-collapse: collapse" border="1">
              <tr id="table1">
                尺寸参数
              </tr>
              <tr>
                {{
                  data_3.size_a
                }}
              </tr>
              <tr>
                {{
                  data_3.size_b
                }}
              </tr>
              <tr>
                {{
                  data_3.size_c
                }}
              </tr>
              <tr>
                {{
                  data_3.size_d
                }}
              </tr>
              <tr>
                {{
                  data_3.size_e
                }}
              </tr>
              <tr id="table2">
                动力性能
              </tr>
              <tr>
                {{
                  data_3.power_i
                }}
              </tr>
              <tr>
                {{
                  data_3.power_n
                }}
              </tr>
              <tr id="table3">
                制动悬架
              </tr>
              <tr>
                {{
                  data_3.brake_a
                }}
              </tr>
              <tr>
                {{
                  data_3.brake_b
                }}
              </tr>
              <tr>
                {{
                  data_3.brake_e
                }}
              </tr>
              <tr>
                {{
                  data_3.brake_f
                }}
              </tr>
              <tr id="table4">
                安全装备
              </tr>
              <tr>
                {{
                  data_3.safty_a
                }}
              </tr>
              <tr>
                {{
                  data_3.safty_b
                }}
              </tr>
              <tr>
                {{
                  data_3.safty_c
                }}
              </tr>
              <tr>
                {{
                  data_3.safty_d
                }}
              </tr>
              <tr>
                {{
                  data_3.safty_e
                }}
              </tr>
              <tr>
                {{
                  data_3.safty_f
                }}
              </tr>
              <tr>
                {{
                  data_3.safty_g
                }}
              </tr>
              <tr>
                {{
                  data_3.safty_h
                }}
              </tr>
              <tr>
                {{
                  data_3.safty_i
                }}
              </tr>
              <tr>
                {{
                  data_3.safty_k
                }}
              </tr>
              <tr>
                {{
                  data_3.safty_o
                }}
              </tr>
              <tr>
                {{
                  data_3.safty_y
                }}
              </tr>
              <tr id="table5">
                驾驶装备
              </tr>
              <tr>
                {{
                  data_3.assist_b
                }}
              </tr>
              <tr>
                {{
                  data_3.assist_f
                }}
              </tr>
              <tr>
                {{
                  data_3.assist_g
                }}
              </tr>
              <tr>
                {{
                  data_3.assist_h
                }}
              </tr>
              <tr>
                {{
                  data_3.assist_m
                }}
              </tr>
              <tr>
                {{
                  data_3.assist_q
                }}
              </tr>
              <tr id="table6">
                外观装备
              </tr>
              <tr>
                {{
                  data_3.facade_f
                }}
              </tr>
              <tr>
                {{
                  data_3.facade_h
                }}
              </tr>
              <tr id="table7">
                内饰装备
              </tr>
              <tr>
                {{
                  data_3.trim_e
                }}
              </tr>
              <tr>
                {{
                  data_3.trim_w
                }}
              </tr>
              <tr id="table8">
                智能系统
              </tr>
              <tr>
                {{
                  data_3.dilink_c
                }}
              </tr>
              <tr>
                {{
                  data_3.dilink_i
                }}
              </tr>
              <tr>
                {{
                  data_3.dilink_j
                }}
              </tr>
              <tr id="table9">
                新能源类
              </tr>
              <tr>
                {{
                  data_3.lamplight_e
                }}
              </tr>
              <tr>
                {{
                  data_3.lamplight_g
                }}
              </tr>
              <tr>
                {{
                  data_3.lamplight_h
                }}
              </tr>
              <tr>
                {{
                  data_3.lamplight_k
                }}
              </tr>
              <tr>
                {{
                  data_3.glass_f
                }}
              </tr>
              <tr>
                {{
                  data_3.air_d
                }}
              </tr>
              <tr>
                {{
                  data_3.air_e
                }}
              </tr>
              <tr>
                {{
                  data_3.air_h
                }}
              </tr>
              <tr>
                {{
                  data_3.new_energy_h
                }}
              </tr>
            </table>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 版心结束 ↑ ↑ ↑ ↑-->
  </div>
</template>

<script>
import BydHeader from "../components/BydHeader.vue";
export default {
  components: { BydHeader },
  data() {
    return {
      picShow_1: true,
      picShow_2: true,
      picShow_3: true,
      data_1: "",
      data_2: "",
      data_3: "",
      datapic_1: "",
      datapic_2: "",
      datapic_3: "",
      code_1: "",
      code_2: "",
      code_3: "",
      value: [],
      // dialogTableVisible: false,
      dialogFormVisible_1: false,
      dialogFormVisible_2: false,
      dialogFormVisible_3: false,
      // centerDialogVisible: false,
      options: [
        {
          value: "haibao",
          label: "海豹",
          children: [
            {
              value: "1",
              label: "550km标准续航后驱版精英型",
            },
            {
              value: "2",
              label: "550km标准续航后驱版尊贵型",
            },
            {
              value: "3",
              label: "700km长续航后驱版",
            },
            {
              value: "4",
              label: "650km四驱性能版",
            },
          ],
        },
        {
          value: "handmi",
          label: "汉DM-i",
          children: [
            {
              value: "5",
              label: "121KM尊贵型",
            },
            {
              value: "6",
              label: "121KM尊容型",
            },
            {
              value: "7",
              label: "121KM尊享型",
            },
            {
              value: "8",
              label: "242KM旗舰型",
            },
          ],
        },
        {
          value: "hanev",
          label: "汉EV 创世版",
          children: [
            {
              value: "9",
              label: "715KM尊容型",
            },
            {
              value: "10",
              label: "715KM旗舰型",
            },
            {
              value: "11",
              label: "610KM四驱尊享型",
            },
          ],
        },
        {
          value: "tangev",
          label: "2022款唐EV",
          children: [
            {
              value: "12",
              label: "600KM尊享型",
            },
            {
              value: "13",
              label: "730KM尊享型",
            },
            {
              value: "14",
              label: "635KM四驱尊享型",
            },
          ],
        },
      ],
    }
  },
  mounted() {
    // 原生DOM：标签添加高亮
    //查询到所有的span
    const tbs = document.querySelectorAll("#tb i")
    tbs.forEach(
      (tb) =>
        (tb.onclick = function () {
          //1.先找到当前active的，删了  (先分手)
          document.querySelector(".active").classList.remove("active")
          //2.再为当前点击的添加  （再谈新的，只能有一个）
          this.classList.add("active")
        })
    )
  },

  methods: {
    getData1() {
      const url = `/compare?cid=${this.value[1]}`
      this.axios.get(url).then((res) => {
        this.data_1 = res.data.data[0]
      })
    },
    getPic1() {
      const url = `/pic?cid=${this.value[1]}`
      this.axios.get(url).then((res) => {
        this.datapic_1 = res.data.data[0]
        this.code_1 = res.data.code
      })
    },
    changePic1() {
      if (this.code_1 == 200) {
        this.picShow_1 = false
        return true
      } else {
        return false
      }
    },
    getData2() {
      const url = `/compare?cid=${this.value[1]}`
      this.axios.get(url).then((res) => {
        this.data_2 = res.data.data[0]
      })
    },
    getPic2() {
      const url = `/pic?cid=${this.value[1]}`
      this.axios.get(url).then((res) => {
        this.datapic_2 = res.data.data[0]
        this.code_2 = res.data.code
      })
    },
    changePic2() {
      if (this.code_2 == 200) {
        this.picShow_2 = false
        return true
      } else {
        return false
      }
    },
    getData3() {
      const url = `/compare?cid=${this.value[1]}`
      this.axios.get(url).then((res) => {
        this.data_3 = res.data.data[0]
      })
    },
    getPic3() {
      const url = `/pic?cid=${this.value[1]}`
      this.axios.get(url).then((res) => {
        this.datapic_3 = res.data.data[0]
        this.code_3 = res.data.code
      })
    },
    changePic3() {
      if (this.code_3 == 200) {
        this.picShow_3 = false
        return true
      } else {
        return false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
#center {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  user-select: none;
}

// 卡片
.image {
  width: 80%;
}

.carimg:hover {
  transform: scale(1.3);
  transition: 1.5s;
  cursor: pointer;
}

// 车名h4文字样式
h4 {
  color: rgb(61, 42, 42);
  line-height: 20px;
  height: 20px;
  margin: 0px;
  
}

.imagePk {
  width: 100%;
}
.grid-content {
  min-height: 36px;
}

.scroll .el-col-6 {
  padding: 0px !important;
}


// 锚点样式
// 外层大的div
body{
  position:relative;
}
.titles{
  height:400px;
  width: 120px;
  position: absolute;
  z-index:auto;
  top: 35%;
  left:5%;
  user-select: none;
}
// 列表样式
ul {
  box-shadow: 0 0 8px rgb(223, 222, 222);
  border-radius: 8px;
  padding: 0;

  li{
    width: 100%;
    text-align: center;
  }
}


ul li span,
a {
  color: rgb(116, 115, 115);
  text-decoration: none;
  display: inline-block;
  line-height: 40px;
  font-size: 14px;
}

// 表格的样式
table {
  font-size: 14px;
  border-color: #efefef;
  width: 100%;
  color: rgb(121, 116, 116);

  tr {
    line-height: 40px;
    height: 45px;
    color: rgb(64, 63, 63);
    border: 1px solid #efefef;
  }
}

// 表格上面标题的样式
#table1,
#table2,
#table3,
#table4,
#table5,
#table6,
#table7,
#table8,
#table9,
#table10,
#table11,
#table12 {
  font-size: 18px;
  margin: 10px;
  background-color: #efefef;
  margin-left: 33px;
}

.el-col-6 .grid-content #table1,
.el-col-7 .grid-content #table1,
.el-col-6 .grid-content #table2,
.el-col-7 .grid-content #table2,
.el-col-6 .grid-content #table3,
.el-col-7 .grid-content #table3,
.el-col-6 .grid-content #table4,
.el-col-7 .grid-content #table4,
.el-col-6 .grid-content #table5,
.el-col-7 .grid-content #table5,
.el-col-6 .grid-content #table6,
.el-col-7 .grid-content #table6,
.el-col-6 .grid-content #table7,
.el-col-7 .grid-content #table7,
.el-col-6 .grid-content #table8,
.el-col-7 .grid-content #table8,
.el-col-6 .grid-content #table9,
.el-col-7 .grid-content #table9,
.el-col-6 .grid-content #table10,
.el-col-7 .grid-content #table10,
.el-col-6 .grid-content #table11,
.el-col-7 .grid-content #table11,
.el-col-6 .grid-content #table12,
.el-col-7 .grid-content #table12 {
  color: transparent;
}
#table1 {
  margin-top: 0;
}

#tb i:hover,
  /* 默认class为sctice的亮起来 */
  #tb i.active {
  color: #00b1a9;
  margin: 10px;
}

tr:hover {
  background-color: #f7f4f4;
}

/* 修改滚动条样式 */
.scroll::-webkit-scrollbar {
  width: 6px; /*设置滚动条的宽度*/
}

/* 滚动区域的样式 */
.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px; /*设置滚动条的圆角*/
  background: rgb(220, 219, 219); /*设置滚动条的颜色*/
}

/* 滚动条的背景样式 */
.scroll::-webkit-scrollbar-track {
  border-radius: 0;
  background-color: #fff;
}
</style>
